﻿@page "/components/select"


<DocsPage>
    <DocsPageHeader Title="Select" SubTitle="Select fields allows users to provide information from a list of options." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Variants</Title>
                <Description>Select comes in the variants Text, Filled and Outline. Also, Select is generic, meaning you can use values of any type with it. See the example code how that works.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MudContainer>
                    <SelectVariantsExample />
                </MudContainer>
            </SectionContent>
            <SectionSource ShowCode="true" Code="SelectVariantsExample" GitHubFolderName="Select" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Usage</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MudContainer>
                    <SelectUsageExample />
                </MudContainer>
            </SectionContent>
            <SectionSource ShowCode="false" Code="SelectUsageExample" GitHubFolderName="Select" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Multiselect</Title>
                <Description>
                    If you set <CodeInline>MultiSelection="true"</CodeInline> you can select multiple values. The selected options are returned as concatenated comma delimited
                    string via <CodeInline>Value</CodeInline> and as a Hashset&lt;string> via <CodeInline>SelectedValues</CodeInline>
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MudContainer>
                    <MultiSelectExample />
                </MudContainer>
            </SectionContent>
            <SectionSource ShowCode="false" Code="MultiSelectExample" GitHubFolderName="Select" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Dense</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SelectDenseExample />
            </SectionContent>
            <SectionSource Code="SelectDenseExample" GitHubFolderName="Select" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Disabled</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SelectDisabledExample />
            </SectionContent>
            <SectionSource Code="SelectDisabledExample" GitHubFolderName="Select" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Interactive</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MudContainer Class="py-6">
                    <SelectInteractiveExample />
                </MudContainer>
            </SectionContent>
            <SectionSource ShowCode="false" Code="SelectInteractiveExample" GitHubFolderName="Select" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Value presentation</Title>
                <Description>
                    Select uses the render fragements you specify for the items to display the selected value (if any). If you don't specify render fragments the value will be displayed as text. Also, if you have render fragments
                    but the value that has been set is not in the list, it will also be displayed as text.
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MudContainer Class="py-6">
                    <SelectPresentationExample />
                </MudContainer>
            </SectionContent>
            <SectionSource ShowCode="false" Code="SelectPresentationExample" GitHubFolderName="Select" />
        </DocsPageSection>

        <DocsPageSection>
        <SectionHeader>
            <Title>Select with custom converter</Title>
            <Description>
                Select has a built-in <CodeInline>DefaultConverter</CodeInline> which converts the values from any primitive type to string for presentation of the selected value. 
                You can customize that converter as described under <MudLink Href="/features/converters">Converters</MudLink>. Here we use <CodeInline>ToStringFunc</CodeInline> to 
                convert objects of type Pizza to their string representation. Note how the <CodeInline Tag="true">MudSelectItem</CodeInline> uses that string representation if you don't 
                specify a render fragement.
            </Description>
        </SectionHeader>
        <SectionContent Outlined="true" DisplayFlex="true">
            <MudContainer Class="py-6">
                <SelectCustomConverterExample />
            </MudContainer>
        </SectionContent>
        <SectionSource ShowCode="false" Code="SelectCustomConverterExample" GitHubFolderName="Select" />
    </DocsPageSection>
        

    </DocsPageContent>
</DocsPage>

